<template>
  <basic-container>
    <div class="search_form">
      <el-form ref="form" :model="queryForm" label-width="100px" @submit.native.prevent>
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="客户:">
              <el-select id="id-business-invoiceEntity-queryForm-customerId" v-model="queryForm.id" clearable
                         filterable size="mini" placeholder="请选择客户"
                         style="width: 100%"
                         ref="id" @change="searchForm">
                <el-option v-for="(item,index) in customerList"
                           :key="index" :label="item.name" :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
<!--          <el-col span="4" style="min-width: 160px;display:flex;justify-content:flex-end;float: right">-->
<!--            <el-tooltip class="item" effect="dark" content="搜索" placement="top">-->
<!--              <el-button id="id-business-customer-searchForm" ype="primary" icon="el-icon-search" size="small"-->
<!--                         @click="searchForm" style="margin-right: 0">-->
<!--                搜索-->
<!--              </el-button>-->
<!--            </el-tooltip>-->
<!--          </el-col>-->
        </el-row>
      </el-form>
    </div>
    <avue-crud :option="option"
                   :table-loading="loading"
                   :view-name="'invoiceEntity'"
                   :data="data"
                   :page.sync="page"
                   :permission="permissionList"
                   :before-open="beforeOpen"
                   :row-class-name-rollback="getRowClassName"
                   ref="crud"
                   @row-update="rowUpdate"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @on-load="onLoad">
<!--      <template slot-scope="{row}" slot="status">-->
<!--        <el-select v-model="row.status"-->
<!--                   size="mini"-->
<!--                   @change="changeStatus(row)">-->
<!--          <el-option label="停止" :value="0"></el-option>-->
<!--          <el-option label="活跃" :value="1"></el-option>-->
<!--        </el-select>-->
<!--      </template>-->

      <template slot-scope="{row}" slot="status">
        <span>{{getStatusText(row.status)}}</span>
      </template>

      <template slot="menuLeft">
        <el-button type="primary"
                   size="small"
                   id="id-finance-receivable-handleAdd"
                   icon="el-icon-plus"
                   plain
                   v-if="this.permission.receivable_add"
                   @click="handleAdd">新 增
        </el-button>
      </template>
      <template slot-scope="{type,disabled}" slot="offerLabel">
        <span>offer ( {{ offerList.length }} )</span>
      </template>
      <template slot-scope="{row}" slot="orderListTitleForm">
        <div style="margin-right: -100%">
        </div>
      </template>
      <template slot-scope="{row}" slot="orderListForm">
        <div style="margin-left: -50px;margin-right: -100%">
          <customer-offer-list :customerId="row.id"></customer-offer-list>
        </div>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-tooltip content="查看" placement="top">
          <el-button size="small" icon="el-icon-view" type="text" @click="rowView(scope.row,scope.index)"
                     :disabled="!(permissionList.viewBtn)"></el-button>
        </el-tooltip>
        <span style="padding-left: 10px;"></span>
        <el-tooltip content="编辑" placement="top">
          <el-button icon="el-icon-edit" type="text" @click="rowEdit(scope.row,scope.index)"
                     :disabled="!(permissionList.editBtn)"></el-button>
        </el-tooltip>
        <span style="padding-left: 10px;"></span>
<!--        <el-tooltip content="删除" placement="top">-->
<!--          <el-button size="small" icon="el-icon-delete" type="text" :disabled="!(permissionList.delBtn)"-->
<!--                     @click="deleteAccount(scope)"></el-button>-->
<!--        </el-tooltip>-->
      </template>
    </avue-crud>
    <el-drawer size="60%" :title="drawerTitle" :visible.sync="drawerVisible" :modal-append-to-body="false"
               style="width:100%;" :close-on-press-escape="false" :wrapperClosable="false"
               :close-on-click-modal="false" :before-close="handlerDrawerClose" :append-to-body="true">
      <el-form ref="form" :model="form" label-width="100px" style="width: 90%;margin: 0 auto" :rules="rules">
        <el-row :gutter="20" style="display: flex;flex-wrap: wrap">
          <el-col :span="item.span || 12" v-for="(item,index) in option.column" :key="index" v-if="drawerTitle === '查 看'
          ? (item.viewDisplay === false ? false : true) : drawerTitle ==='新 增' ? (item.addDisplay === false ? false : true):
          (item.editDisplay === false ? false : true)">
            <el-form-item :label="item.label" :prop="item.prop">
              <el-select @change="item.callback" clearable filterable :disabled="drawerTitle === '查 看'"
                         style="width: 100%" size="mini"
                         v-if="item.type === 'select'" v-model="form[item.prop]">
                <el-option v-for="it in item.dicData" :key="item.props ? it[item.props.value] : it.value"
                           :label="item.props ? it[item.props.label] : it.label"
                           :value="item.props ? it[item.props.value] : it.value"
                           ></el-option>
              </el-select>
              <el-switch v-if="item.type === 'switch'" v-model="form[item.prop]" :active-value='1' :inactive-value='0'
                         :disabled="drawerTitle === '查 看'">
              </el-switch>
              <el-input v-if="item.type === 'textarea'" type="textarea" :disabled="drawerTitle === '查 看'" size="mini"
                        v-model="form[item.prop]" :autosize="{ minRows: 5 }" maxlength="500" show-word-limit></el-input>
              <el-input maxlength="100" :disabled="drawerTitle === '查 看'" v-if="item.type === 'input' || !item.type"
                        size="mini"
                        v-model="form[item.prop]"></el-input>
              <el-input maxlength="100" :disabled="drawerTitle === '查 看'" v-if="item.type === 'number'"
                        size="mini" onkeyup="value=value.replace(/[^\d]/g,'')"
                        v-model="form[item.prop]"></el-input>
              <el-date-picker
                v-if="item.type === 'datemonth'"
                id="id-finance-receivable-occurMonth"
                v-model="form[item.prop]"
                type="month"
                value-format="yyyy-MM"
                unlink-panels
                size="mini"
                :picker-options="pickerOptions"
                style="width: 100%">
              </el-date-picker>

              <el-date-picker
                v-if="item.type === 'datedate'"
                id="id-finance-receivable-predictPaymentDate"
                v-model="form[item.prop]"
                type="date"
                value-format="yyyy-MM-dd"
                unlink-panels
                size="mini"
                :picker-options="pickerOptions"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <span>收款方信息</span>
          </el-col>
        </el-row>
        <el-row :gutter="2" style="display: flex;flex-wrap: wrap"
                v-for="(item,index) in entityForm.entityItems" :key="index">
          <el-col>
            <hr style="height:1px;border:none;border-top:1px solid #DCDFE6;" />
          </el-col>
          <span>{{index+1}}</span>
          <el-col :span="10">
            <div style="display: flex;">
              <span style="width: 100px; text-align: right; font-size: 13px; padding: 5px 12px 0 0;margin-left: 15px">
                <span style="color: red;">*</span> 实体名称</span>
              <el-input :disabled="drawerTitle == '查 看' " maxlength="120" size="mini" v-model="item.entityName"></el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="display: flex">
              <span style="width: 100px; text-align: right; font-size: 13px; padding: 5px 12px 0 0;">
                <span style="color: red;">*</span> 签订合同</span>
                      <el-select v-model="item.signContract"
                                 size="mini" :disabled="drawerTitle == '查 看'">
                        <el-option label="已签订" :value="0"></el-option>
                        <el-option label="未签订" :value="1"></el-option>
                      </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="display: flex">
              <span style="width: 100px; text-align: right; font-size: 13px; padding: 5px 12px 0 0;">
                <span style="color: red;">*</span> 属性</span>
              <el-select v-model="item.areaProp"
                         size="mini" :disabled="drawerTitle == '查 看'">
                <el-option label="国内" :value="0"></el-option>
                <el-option label="国外" :value="1"></el-option>
                <el-option label="加密" :value="2"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="11">
            <div style="display: flex">
              <span style="width: 120px; text-align: right; font-size: 13px; padding: 5px 12px 0 0;">
                <span style="color: red;">*</span> 实体地址</span>
              <el-input :disabled="drawerTitle == '查 看' " maxlength="100" size="mini" v-model="item.entityAddress"></el-input>
            </div>
          </el-col>
          <el-col :span="11">
            <div style="display: flex">
              <span style="width: 120px; text-align: right; font-size: 13px; padding: 5px 12px 0 0;"><span style="color: red;display: none">*</span> 联系方式</span>
              <el-input :disabled="drawerTitle == '查 看'" maxlength="100" size="mini" v-model="item.contactWay"></el-input>
            </div>
          </el-col>
          <el-col :span="11">
            <div style="display: flex">
              <span style="width: 120px; text-align: right; font-size: 13px; padding: 5px 12px 0 0;">
                <span style="color: red;">*</span> 银行名称</span>
              <el-input :disabled="drawerTitle == '查 看' " maxlength="100" size="mini" v-model="item.bankName"></el-input>
            </div>
          </el-col>
          <el-col :span="11">
            <div style="display: flex">
              <span style="width: 120px; text-align: right; font-size: 13px; padding: 5px 12px 0 0;"><span style="color: red;">*</span> 开户行</span>
              <el-input :disabled="drawerTitle == '查 看'" maxlength="100" size="mini" v-model="item.bankOfDeposit"></el-input>
            </div>
          </el-col>
          <el-col :span="11">
            <div style="display: flex">
              <span style="width: 120px; text-align: right; font-size: 13px; padding: 5px 12px 0 0;"><span style="color: red;">*</span> 账户名称</span>
              <el-input :disabled="drawerTitle == '查 看'  " maxlength="100" size="mini" v-model="item.accountName"></el-input>
            </div>
          </el-col>
          <el-col :span="11">
            <div style="display: flex">
              <span style="width: 120px; text-align: right; font-size: 13px; padding: 5px 12px 0 0;"><span style="color: red;">*</span> 账户ID</span>
              <el-input :disabled="drawerTitle == '查 看'  " maxlength="100" size="mini" v-model="item.accountNumber"></el-input>
            </div>
          </el-col>
          <el-col :span="11">
            <div style="display: flex">
              <span style="width: 120px; text-align: right; font-size: 13px; padding: 5px 12px 0 0;">SwiftCode</span>
              <el-input :disabled="drawerTitle == '查 看' " maxlength="100" size="mini" v-model="item.swiftCode"></el-input>
            </div>
          </el-col>
          <el-col :span="11">
            <div style="display: flex">
              <span style="width: 120px; text-align: right; font-size: 13px; padding: 5px 12px 0 0;">返点比例</span>
              <el-input :disabled="drawerTitle == '查 看' " maxlength="100" size="mini" v-model="item.rebateRate"></el-input>
            </div>
          </el-col>
          <el-col :span="2">
              <i v-show="drawerTitle != '查 看' && item.id===undefined" class="el-icon-delete" style="cursor: pointer; margin-left: 10px;"
                 @click="removeEntityItem(index)"></i>
          </el-col>
        </el-row>

        <el-link type="primary" @click="addEntityItem" v-show="drawerTitle != '查 看'">+ 添加实体</el-link>

        <div v-if="drawerTitle !== '查 看'" style="display: flex;justify-content: flex-end">
          <el-button v-show="drawerTitle != '查 看'" size="mini" type="primary" icon="el-icon-circle-check" @click="handleForm">保存</el-button>
          <el-button size="mini" icon="el-icon-circle-close" @click="handlerDrawerClose">退出</el-button>
        </div>
      </el-form>
    </el-drawer>
    <div id="downloadExcel"></div>
  </basic-container>
</template>

<script>
import {
  getEntityList,
  addEntity,
  updateEntity,
  getCustomerDetail, getEntityListByCustomer,filterEntityCustomer
} from "@/api/finance/invoiceEntity";
import {deepClone, exportExcel} from "@/util/util";
import {mapGetters} from "vuex";
import BeetlesTable from "@/components/basic-components/beetles-table";
import {alterStatus} from "../../api/business/customer";
import {getProductName} from "../../api/business/appManager";
import {getReceivableCustomers} from "@/api/finance/receivable";
import {getCustomerList, getCustomerListWithNoEntity} from "@/api/finance/commonApi";
import {removeEntity} from "../../api/finance/invoiceEntity";

export default {
  components: {
    BeetlesTable,
  },
  data() {
    return {
      index: 0,
      editData: [],
      productNameList: [],
      customerList: [],
      upIcon: 'el-icon-arrow-down',
      searchConceal: false,
      rowStatus: [{label: "活跃", value: "1"}, {label: "停止", value: "0"}],
      rules: {},
      form: {
      },
      entityCreateTime: [],
      queryForm: {
        id: '',
      },
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      emptyIcon: 'el-icon-delete',
      drawerTitle: '',
      drawerVisible: false,
      managerList: [],
      selectionList: [],
      createUserList: [],
      curBriefName: "",
      option: {
        calcHeight: 30,
        tip: false,
        searchShow: false,
        searchMenuSpan: 6,
        border: true,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth: 120,
        selection: true,
        dialogClickModal: false,
        dialogWidth: 1200,
        column: [
          {
            label: "客户",
            type: 'select',
            prop: "id",
            dicData: [],
            props: {
              label: "name",
              value: "key",
              data: "data"
            },

            rules: [{
              required: true,
              message: "请选择客户",
              trigger: "change"
            }],
            overHidden: true,
            fixed: true,
            // hide: true,
            showColumn:false,
            callback: this.customerChanged
          },
          {
            label: "客户",
            prop: "name",
            addDisplay: false,
            viewDisplay: false,
            editDisplay: false,
          },
          {
            label: "客户全称",
            prop: "fullName",
            width: 200,
            addDisplay: true,
            viewDisplay: true,
            editDisplay: true,
          },
          {
            label: "状态",
            prop: "status",
            width: 100,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            dicData: [
              {label: '活跃', value: 0},
              {label: '停止', value: 1}
            ]
          },
          {
            label: "账期",
            type: "number",
            width: 80,
            prop: "financeDays",
            rules: [
              {
                required: true,
                message: '请输入账期',
                trigger: 'blur'
              }
            ],
            addDisplay: true,
            viewDisplay: true,
            editDisplay: true,
          },
          // {
          //   label: "Email",
          //   width: 150,
          //   prop: "email",
          //   addDisplay: true,
          //   viewDisplay: true,
          //   editDisplay: true,
          // },
          // {
          //   label: "地址",
          //   span: 24,
          //   width: 250,
          //   prop: "address",
          //   addDisplay: true,
          //   viewDisplay: true,
          //   editDisplay: true,
          //   overHidden: true,
          // },
          // {
          //   label: "银行账户",
          //   width: 80,
          //   prop: "invoiceEntityNumber",
          //   addDisplay: false,
          //   viewDisplay: false,
          //   editDisplay: false,
          // },
          {
            label: "实体名称",
            width: 80,
            prop: "entityName",
            addDisplay: false,
            viewDisplay: false,
            editDisplay: false,
            overHidden: true
          },
          {
            label: "银行名称",
            width: 80,
            prop: "bankName",
            addDisplay: false,
            viewDisplay: false,
            editDisplay: false,
            overHidden: true
          },

          // {
          //   label: "备注",
          //   span: 24,
          //   type: "textarea",
          //   prop: "financeRemark",
          //   addDisplay: true,
          //   viewDisplay: true,
          //   editDisplay: true,
          //   overHidden: true
          // },
          {
            label: "创建人",
            width: 120,
            prop: "createUserName",
            filterable: true,
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
          },
          {
            label: "创建时间",
            width: 130,
            prop: "entityCreateTime",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
          },
        ]
      },
      data: [],
      currOpRowId: '',
      offerList: [],
      entityForm: {
        target: '',
        entityItems: [{
          entityName: '',
          bankName: '',
          bankOfDeposit: '',
          accountName: '',
          accountNumber: '',
          swiftCode: '',
          rebateRate: '',
          remark: '',
          signContract:'',
          areaProp:'',
          entityAddress:'',
          contactWay:''
        }]
      },
    };
  },
  computed: {
    ...mapGetters(["permission", "roles", "userInfo"]),
    permissionList() {
      return {
        addBtn: false,
        viewBtn: this.vaildData(this.permission.receivable_view),
        delBtn: this.vaildData(this.permission.receivable_delete),
        editBtn: this.vaildData(this.permission.receivable_edit),
        excelBtn: this.vaildData(this.permission.receivable_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  watch: {
  },
  created() {
    this.init();
    this.buildSearch();
  },
  methods: {
    customerChanged(value) {
      if (value != "") {
        getCustomerDetail(value).then(res => {
          let data = res.data.data;
          this.form.fullName = data.fullName
          this.form.financeDays = data.financeDays
          this.form.email = data.email
          this.form.address = data.address
          // this.$forceUpdate();
        });
      }
    },
    addEntityItem() {
      this.entityForm.entityItems.push(
        {
          entityName: '',
          bankName: '',
          bankOfDeposit: '',
          accountName: '',
          accountNumber: '',
          swiftCode: '',
          rebateRate: '',
          remark: '',
          signContract:'',
          areaProp:'',
          entityAddress:'',
          contactWay:''
        }
      )
      console.log(this.entityForm.entityItems)
    },
    removeEntityItem(index) {
      if (this.entityForm.entityItems.length == 1) {
        this.$message({
          type: "warning",
          message: "最后一条了！"
        });
        return
      }
      this.entityForm.entityItems.splice(index, 1)
    },
    unfoldIcon() {
      if (this.upIcon === 'el-icon-arrow-down') {
        this.upIcon = 'el-icon-arrow-up'
        this.searchConceal = true
      } else {
        this.upIcon = 'el-icon-arrow-down'
        this.searchConceal = false
      }
    },
    productNameString(productName) {
      let nameList = []
      if (productName !== '') {
        nameList = productName.split(",")
      }
      return nameList
    },
    changeStatus(row) {
    },
    statusTableList() {
      return [
        {label: '活跃', value: 1},
        {label: '停止', value: 0}
      ]
    },
    /**
     * 新增
     */
    handleAdd() {
      this.optionRules()
      this.form = {
        phone: '',
        email: '',
        financeDays: '',
        fullName: '',
        address: ''
      }
      this.entityForm.entityItems = [{
        entityName: '',
        bankName: '',
        bankOfDeposit: '',
        accountName: '',
        accountNumber: '',
        swiftCode: '',
        rebateRate: '',
        remark: ''
      }]

      filterEntityCustomer().then(res => {
        let column = this.findObject(this.option.column, "id");
        column.dicData = res.data.data
      })

      this.drawerTitle = '新 增';
      this.drawerVisible = true;
    },
    progressView(row) {
      this.form = row;
      // this.beforeOpen();
      this.drawerTitle = '收支进展';
      this.drawerVisible = true;
    },
    /**
     * 查看
     */
    rowView(row) {
      let column = this.findObject(this.option.column, "id");
      column.dicData = this.customerList

      this.form = row;
      this.beforeOpen();
      this.drawerTitle = '查 看';
      this.drawerVisible = true;
    },
    /**
     * 编辑
     */
    rowEdit(row) {
      let column = this.findObject(this.option.column, "id");
      column.dicData = this.customerList
      console.log(row)
      this.rules = {}
      this.form = deepClone(row);
      this.beforeOpen();
      this.drawerTitle = '编 辑';
      this.drawerVisible = true;
      this.optionRules()
    },
    /**
     * 新增/编辑判断条件
     */
    optionRules() {
      this.option.column.map(item => {
        if (item.rules) {
          let rule = {[item.prop]: item.rules}
          this.rules = Object.assign(this.rules, rule)
        }
      })
    },
    /**
     * 删除
     */
    async deleteAccount(scope) {
      this.$confirm('是否刪除?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const {data: res} = await removeEntity(scope.row.entityId)
        if (res.code !== 200) return this.$message.error('删除失败')
        this.$message.success('删除成功')
        //todo 删除之后刷新没做完
        // this.onLoad(this.page)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    init() {
      getCustomerList().then(res => {
        this.customerList = res.data.data
      })
    },
    getStatusText(id) {
      if (id == 0) return "停止";
      if (id == 1) return "活跃";
    },
    buildSearch() {
      this.query = {...this.queryForm};
    },
    searchForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.buildSearch();
          this.page.currentPage = 1
          this.onLoad(this.page)
        }
      });
    },
    /**
     * 关闭抽屉
     */
    handlerDrawerClose() {
      this.drawerVisible = false;
      // this.refreshChange()
    },
    //清楚按钮函数
    emptyForm() {
      this.queryForm = {
        name: '',
        createUser: '',
        level: '',
        status: '',
        productName: '',
        phone: '',
        address: '',
        startDate: '',
        endDate: ''
      }
      this.entityCreateTime = []
      this.searchForm();
    },
    // entityMotified(item) {
    //   return item.bankName != '' || item.bankOfDeposit != '' || item.accountName != '' ||
    //     item.accountNumber != '' || item.rebateRate != '' || item.remark != ''
    // },
    handleForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let hasInvalidEntity = false
          this.entityForm.entityItems.map(item => {
            if (item.entityName == '' || item.bankName == '' || item.bankOfDeposit == '' || item.accountName == '' ||
                item.accountNumber == '') {
                hasInvalidEntity = true
              }
          })
          if (hasInvalidEntity) {
            this.$message({
              type: "error",
              message: "银行账户信息输入不全，实体名称、银行名称、开户行、账户名称、账户ID为必填项！"
            });
            return
          }
          if (this.drawerTitle === '新 增') {
            this.rowSave();
          } else {
            this.rowUpdate();
          }
        }
      });
    },
    rowSave() {
      this.form['invoiceEntityList'] = this.entityForm.entityItems
      addEntity(this.form).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.drawerVisible = false;
      }, error => {
        window.console.log(error);
      });
    },
    rowUpdate() {
      this.form['invoiceEntityList'] = this.entityForm.entityItems
      updateEntity(this.form).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.drawerVisible = false;
      }, error => {
        console.log(error);
      });
    },
    async beforeOpen() {
      this.currOpRowId = this.form.id;
      await getEntityListByCustomer(this.form.id).then(res => {
        this.entityForm.entityItems = res.data.data;
      });
    },
    searchReset() {
      this.emptyForm();
    },
    searchChange(params, done) {
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getEntityList(page.currentPage, page.pageSize, Object.assign({}, params, this.query)).then(res => {
        const data = res.data.data;
        console.log(data)
        this.page.total = data.total;
        this.data = data.records;
        console.log(data.records)
        console.log(this.data)
        this.loading = false;
        this.selectionClear();
      });
    },
    getRowClassName({row}) {
      if (row.id == this.currOpRowId) {
        return "current-op-row";
      } else {
        return "";
      }
    },
  }
};
</script>

<style lang="scss">
.form-item-label {
  width: 120px;
  text-align: right;
  font-size: 13px;
  padding: 0 12px 0 0;
}
.search_form {
  /deep/ .el-form-item {
    margin-bottom: 0;
  }
}

.view-offer-table {
  margin-top: 40px;

  /deep/ .el-table td, .el-table th {
    padding: 9px 0;
  }
}
</style>
<style lang="scss" scoped>
/deep/ .current-op-row {
  background-color: #f5dab1;
}

/deep/ .el-input__inner {
  text-overflow: ellipsis;
}
</style>
